<template>
  <div class="forget_container">
    <div class="forget_box">
      <el-form
        class="forget_form"
        :model="forgetForm"
        :rules="loginFormRules"
      >
            <div class="forget_header">
        <h2>忘记密码</h2>
      </div>
        <!-- 账号 -->
        <el-form-item prop="account">
          <span>账号：</span>
          <el-input v-model="forgetForm.account"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item prop="email">
          <span>邮箱：</span>
          <el-input
            v-model="forgetForm.email"
            type="email"
          ></el-input>

        </el-form-item>
        <!-- 验证码 -->
        <span>验证码：</span>
        <el-form-item prop="code">
          <el-input v-model="forgetForm.code" style="width:78%" placeholder="请输入验证码"></el-input>
          
            <el-button type="primary" @click="sendEmail" class="btn_send" style="margin-left:2%">发送验证码</el-button>
         
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btn">
          <el-button
            type="primary"
            @click="modify"
          >确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
        var checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }
    return {
      forgetForm: {
        account: "",
        email: "",
        code: "",
      },
      loginFormRules: {
        account: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
    }
    };
  },

  methods: {
    modify() {
       var code=sessionStorage.getItem('code')
      console.log(code);
      console.log(this.forgetForm.code);
      if(this.forgetForm.code !== ""){
        if(code ==this.forgetForm.code ){
          //  this.$message.success("注册成功！")
           this.$router.push("/modify");
        }
      }else{
         this.$message.error("请填写正确的验证码！")
      }
      //this.$router.push("/modify");
    },
    async sendEmail() {
    if(this.forgetForm.account == ""){
        this.$message.error("请输入账号！")
      }else{
         const{data:res}= await this.$http.get(`/api/user/mail/send?email=${this.forgetForm.email}`);
    // console.log(res);
    // console.log(res.data);
    if(res.code == 200){
       this.$message.success("已发送验证码！")
        sessionStorage.setItem('code',res.data)
        sessionStorage.setItem('account',this.forgetForm.account)
    }
    if(res.code == 100){
       this.$message.error("发送验证码失败！")
    }
      }
  }
  },
};
</script>

<style>
.forget_container {
  background: url("https://gitee.com/zj095/cloudimg/raw/master/202110141323621.png");
  height: 100%;
}

.forget_box {
  width: 650px;
  height: 420px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.forget_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.send {
  cursor: pointer;
  color: dodgerblue;
  float: right;
}
.forget_header {
  position: absolute;
  left: 43%;
  top: -25%;
  color: black;
}
.el-form-item__content {
    line-height: 21px !important;
    position: relative;
    font-size: 14px;
}
</style>